import React,{Component} from  'react'
import {connect} from 'react-redux'
import {getCount} from "../../redux/home.redux";
import { Menu, Dropdown, Icon } from 'antd';
import './home.less'

import {Col,Row} from 'antd'
class Home extends Component{
    constructor(props){
        super(props);
    }

    componentDidMount() {
        this.props.getHomeCount()
    }

    render(){
        return (
            <div className='home'>
                <h1 className='page-header'>首页</h1>
                <Row  gutter={32}>
                    <Col span={8}>

                        <div className="gutter-box">
                            <a className="color-box brown" href="/user">
                                <p className="count">{this.props.userCount}</p><p
                                className="desc"><i className="fa fa-user-o"></i>
                                <span>用户总数</span>
                                </p>
                            </a>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className="gutter-box">
                            <a className="color-box green" href="/product">
                                <p className="count">{this.props.productCount}</p>
                                <p className="desc">
                                    <i className="fa fa-user-o">
                                    </i>
                                <span>商品总数</span>
                               </p>
                            </a>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className="gutter-box">
                            <div className="gutter-box">
                                <a className="color-box blue" href="/order">
                                    <p className="count">{this.props.orderCount}</p>
                                    <p className="desc">
                                        <i className="fa fa-user-o">
                                        </i>
                                        <span>订单总数</span>
                                    </p>
                                </a>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}

function mapStateToProps(state){

    return state.home.data || {};
}

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    getHomeCount: () => {
        dispatch(getCount())
    }
} )
export default connect(mapStateToProps, mapDispatchToProps)(Home);